<template>
  <div class="components-container">
    <pan-thumb :image="image" />

    <el-button
      type="primary"
      icon="el-icon-upload"
      style="position: absolute; bottom: 15px; margin-left: 40px"
      @click="imagecropperShow = true"
    >Change Avatar</el-button>
    <a target="_blank" href="http://47.96.110.19/upload/image">
      <el-button
        type="primary"
        icon="el-icon-upload"
        style="position: absolute; bottom: 15px; right: 100px"
      >查看已上传头像</el-button>
    </a>
    <image-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      :params="params"
      url="http://47.96.110.19:3000/user/upload_avatar"
      lang-type="zh"
      @close="close"
      @crop-upload-success="cropSuccess"
    />
  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import { config } from '@/utils/config'

export default {
  name: 'AvatarUploadDemo',
  components: { ImageCropper, PanThumb },
  data () {
    return {
      params: {
        id: 2
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
    }
  },
  methods: {
    cropSuccess (resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.image = config.IP + resData.avatar_path
    },
    close () {
      this.imagecropperShow = false
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
</style>

